<template>
  <div class="messageBao">
    <Message ref="history" :list="historyMessage" :self="self" v-model="showAiBt" />
    <div class="suspension" v-show="showAiBt == true">
      <ToggleOn v-model="isToggleOn" :buttonTitle="buttonTitle" @sendstart="upAIStatus" />
    </div>
    <!-- 侧边栏 点击显示控件 <div class="tap" @click="showAiBt = !showAiBt"></div> -->
  </div>
  <div class="nana input">
    <!-- 暴露出去得事件名叫enter $emit子组件让父组件传值 -->
    <Editor ref="message" :jargon="jargon" :disabled="!self || !self['to_name']" :user-comment="userComment"
      @enter="$emit('enter', $event)" @showBottomSheet="$emit('showSheek', $event)" />
  </div>
</template>

<script setup lang="ts">
import './style.css'
import Message from '../message/Message.vue';
import Editor from '../editor/Editor.vue';
import { type IProps } from './props';
import { type IEmits } from './emits';
import { ref, watch, nextTick } from 'vue';
import ToggleOn from '../isToggleOn/ToggleOn.vue';
import { setAiStatusSwitchChat } from '@/api';


// 历史
const history = ref<InstanceType<typeof Message> | null>(null)
const message = ref()

const selfAi = localStorage.getItem('selfAi')
const selfId = localStorage.getItem('selfId')

const buttonTitle = '单会话Ai 按钮：'
const showAiBt = ref(false)
const isToggleOn = ref(false)

if (selfAi != '1') {
  isToggleOn.value = false
} else {
  isToggleOn.value = true
}



// withDefaults可以接收两个参数
const props = withDefaults(defineProps<IProps>(), {
  historyMessage: () => [],
})

defineEmits<IEmits>()

watch(
  () => props.self,
  () => {
    nextTick(() => {
      if (message.value) {
        console.log("我调用了");
        message.value.reset()
      }
    });
  },
  { deep: true }
);

watch(() => props.userComment, () => {
  if (props.userComment) {
    // console.log('chat', props.userComment);
  }
})

const upAIStatus = () => {
  const aiStatus = isToggleOn.value == true ? '1' : '0';
  setAiStatusSwitchChat({ conversation_id: selfId!, ai: aiStatus });
  // 再次赋值 全局数据 实时更新
  localStorage.setItem('selfAi', aiStatus);
}

// 将方法暴露给父组件
defineExpose({
  scrollToBottom: () => {
    if (history.value) {
      history.value.scrollToBottom()
      // console.log('histoy调用滚动条方法');
    }
  }
})
</script>
